<template>
  switch parent border:
  <el-switch v-model="parentBorder" />
  switch child border:
  <el-switch v-model="childBorder" />
  <el-table
    :data="tableData"
    :border="parentBorder"
    style="width: 100%"
    @expand-change="echartInit()"
  >
    <el-table-column type="expand">
      <template #default="props">
        {{ props.row.state }}
        <div id="chart" ref="chart1" style="height: 400px; width: 600px"></div>
      </template>
    </el-table-column>
    <el-table-column label="Date" prop="date" />
    <el-table-column label="Name" prop="name" />
  </el-table>
  <el-button @click="echartInit()" />
</template>

<script lang="ts" setup>
import { inject, nextTick, ref } from 'vue'

import { ECOption } from 'types/echarts'

const parentBorder = ref(false)
const childBorder = ref(false)
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114'
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114'
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114'
      }
    ]
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114'
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114'
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114'
      }
    ]
  }
]

let echarts = inject<any>('$echarts')

let echartInit = async () => {
  await nextTick()
  let ch = document.getElementById('chart')
  if (ch == null) {
    console.log('ch is null')
    return
  }
  console.log(ch, 'ch')
  let option: ECOption = {
    series: [
      {
        type: 'pie',
        data: [
          {
            value: 335,
            name: '直接访问'
          },
          {
            value: 234,
            name: '联盟广告'
          },
          {
            value: 1548,
            name: '搜索引擎'
          }
        ]
      }
    ]
  }
  var myChart = echarts.init(ch)
  myChart.setOption(option)
}
</script>
